<template>
  <div class="wallet1">
   <headerNav>
         <div class="wallet">钱包</div>
         <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png" class="rightImg"/>
   </headerNav>
    <div class="wallerDetails">
      <div class="wallerDetails_title">选择申请金额</div>
      <div class="wallerDetails_money">1500<span>元</span></div>
      <div class="wallerDetails_wrap">
        <input type="range" min="500" max="5000" step="500" />
        <span class="range_min">500</span>
        <span class="range_max">5000</span>
        <div></div>
      </div>
    </div>
    <div class="apply" @click="shen">立即申请</div>
   <footerNav></footerNav>
  </div>
</template>

<script>
import footerNav from '@/components/footer_nav'
import headerNav from '@/components/header_nav'
export default {
  name: 'wallet',
  components:{
    headerNav,
    footerNav
  },
  data () {
    return {
    }
  },
  mounted(){
  },
  methods:{
    shen(){
      console.log('a')
    }
  }
}
</script>
<style scoped>
.wallet1{width: 100%;background-color: #f0f0f0;padding-top: 50px;}
.wallet1 div.wallet{width: 100%;height: 100%;line-height: 50px;text-align: center;font-size: 18px;color: #fff;background-image: linear-gradient(-180deg,#3583f1,#1862E2);border-bottom: 1px solid #3583f1;}
.wallerDetails{width: 339px;height: 259px;background: #fff;box-shadow: 0 2px 8px 0 rgba(194,201,208,.51);border-radius: 10px;padding: 20px 23px;box-sizing: border-box;margin: 58px 18px 0px 18px;}
.wallerDetails_title{font-size: 14px;color: #818181;margin-bottom: 10px;}
.wallerDetails_money{font-size: 64px;color: #2095f2;margin-bottom: 10px;}
.wallerDetails_money span{font-size: 14px;color: #5e5e5e;}
.range_min,.range_max{font-size: 14px;display: block;float: left;margin-top: 8px;}
.apply{height: 45px;
    width: 250px;
    background: #3583f1;    align-items: center;
    color: #fff;
    border-radius: 23px;
    font-size: 20px;line-height: 45px;text-align: center;margin:50px auto; }
.range_max{margin-left: 230px;}
input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 290px;
    border-radius: 10px;
}
input[type=range]::-webkit-slider-runnable-track {
   height: 6px;
   border-radius: 10px; /*将轨道设为圆角的*/
   background: blue;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  top: -2px;
  background: black;
}
</style>
